<template>
  <div class="chart-trend">
    <slot name="term"></slot>
    <span>
      <slot name="rate"></slot>
    </span>
    <span :class="['trend-icon', trend]">
      <i :class="'el-icon-caret-' + trend" />
    </span>
  </div>
</template>

<script>
export default {
  name: 'Trend',
  props: {
    type: {
      type: String,
      default: null
    }
  },
  data () {
    return {
      trend: this.type === 'up' ? 'top' : 'bottom',
      rate: this.percentage
    };
  },
  created () {
  }
};
</script>

<style lang="less" scoped>
.chart-trend {
  display: inline-block;
  font-size: 14px;
  // line-height: 18px;

  .trend-icon {
    font-size: 12px;
    &.top,
    &.bottom {
      margin-left: 4px;
      position: relative;
      top: 1px;

      i {
        font-size: 12px;
      }
    }

    &.bottom {
      color: #f5222d;
      top: -1px;
    }
    &.top {
      color: #52c41a;
    }
  }
}
</style>
